<template>
  <view class="main-container">
    <HeadNav></HeadNav>
    <search :commonList="commonList" @deleteStyleItem="deleteStyItem"></search>
    <!-- 筛选栏 -->
    <view class="screening">
      <view @click="showhide(0)">
        <text>全部风格</text>
        <uni-icons type="bottom" size="10" color="#9BA3AA" v-if="uniIcon === 0"></uni-icons>
        <uni-icons type="top" size="10" color="#9BA3AA" v-else></uni-icons>
      </view>
      <view @click="showhide(1)">
        <text>材质</text>
        <uni-icons type="bottom" size="10" color="#9BA3AA" v-if="uniIcon === 1"></uni-icons>
        <uni-icons type="top" size="10" color="#9BA3AA" v-else></uni-icons>
      </view>
      <view @click="showhide(2)">
        <text>价格</text>
        <uni-icons type="bottom" size="10" color="#9BA3AA" v-if="uniIcon === 2"></uni-icons>
        <uni-icons type="top" size="10" color="#9BA3AA" v-else></uni-icons>
      </view>
      <view @click="showhide(3)">
        <text>尺寸</text>
        <uni-icons type="bottom" size="10" color="#9BA3AA" v-if="uniIcon === 3"></uni-icons>
        <uni-icons type="top" size="10" color="#9BA3AA" v-else></uni-icons>
      </view>

    </view>
    <!-- 遮罩层 -->
    <view class="mask" v-show="maskNum === 0">
      <view class="mask-content">
        <view class="content-small" v-for="(item,i) in styleList" :key="i" @click="addItem(item)"
          hover-class="checkActive" hover-stay-time="100">
          {{item.styleName}}
        </view>
      </view>
      <view class="mask-button">
        <view class="button-left" @click="resetStyleList" hover-class="checkActive" hover-stay-time="100">
          重置
        </view>
        <view class="button-right" hover-class="checkActive" hover-stay-time="100" @click="searchStyle">
          确定
        </view>
      </view>
    </view>
    <view class="mask" v-show="maskNum === 1">
      <view class="mask-content">
        <view class="content-small" v-for="(item,i) in materialList" :key="item.materialId" @click="addItem(item)"
          hover-class="checkActive" hover-stay-time="100">
          {{item.materialName}}
        </view>
      </view>
      <view class="mask-button">
        <view class="button-left" @click="resetStyleList" hover-class="checkActive" hover-stay-time="100">
          重置
        </view>
        <view class="button-right" hover-class="checkActive" hover-stay-time="100" @click="searchMaterial">
          确定
        </view>
      </view>
    </view>
    <view class="mask-price" v-show="maskNum === 2">
      <view class="wrap">
        <view class="" @click="price_top">
          价格升序
        </view>
        <view class="" @click="price_down">
          价格降序
        </view>
      </view>
    </view>
    <view class="mask-dimension" v-show="maskNum === 3">
      <view class="wrap-item">
        <view class="size" v-for="(item,i) in dimensionsList" :key="item.dimensionsId" hover-class="checkActive"
          hover-stay-time="100" @click="addItem(item)">
          长宽：{{item.dimensionsName}}
        </view>
      </view>
      <view class="mask-button">
        <view class="button-left" @click="resetStyleList" hover-class="checkActive" hover-stay-time="100">
          重置
        </view>
        <view class="button-right" hover-class="checkActive" hover-stay-time="100">
          确定
        </view>
      </view>
    </view>

    <!-- 商品展示信息 -->
    <view class="goods-lisi">
      <navigator class="goods-lisi-item" v-for="(goodsItem,index) in fromHomeData" :key="index"
        :url="'/subpkg/goods_detail/goods_detail?goodsId=' + goodsItem.goodsId">
        <image :src="imgPrefixAddress + goodsItem.goodsPreviews.split(',')[0]"></image>
        <view class="goods-name">
          {{goodsItem.goodsName}}
        </view>
        <view class="goods-price">
          ¥{{goodsItem.retailValue}}
        </view>
      </navigator>
    </view>
  </view>
</template>

<script>
  import search from '@/subpkg/search/search'
  export default {
    data() {
      return {
        // 上拉加载更多节流阀
        // isLoading: false,
        queryObj: {
          pageNum: 1,
          goodsName: '',
          pageSize: 10,
          styleIds: '',
          materialIds: '',

        },
        imgPrefixAddress: "https://bjlr-1316909348.cos.ap-chengdu.myqcloud.com",
        timer: null,
        keyWord: '',
        // 遮罩层控制器
        maskNum: 10,
        //uniicon控制器
        uniIcon: -1,
        //全部风格数据
        styleList: [],
        //全部材质数据
        materialList: [],
        // 全部价格数据
        price: [],
        //全部尺寸数据
        dimensionsList: [],
        // 传给子组件选中风格的数据
        commonList: [],
        // 首页传过来的数据
        fromHomeData: [],
        // 搜索结果商品数组
        searchResultList: []
      };
    },
    methods: {
      // 风格筛选确定按钮
      searchStyle() {
        const obj = []
        this.commonList.forEach(item => {
          obj.push(item.styleId)
        })
        this.queryObj.styleIds = obj.join()
        this.getSearchResult()
        this.showhide(0)

      },
      searchMaterial() {
        const obj = []
        this.commonList.forEach(item => {
          obj.push(item.materialId)
        })
        this.queryObj.materialIds = obj.join()
        this.getSearchResult()
        this.showhide(1)
      },
      // 获取分类数据
      async getClassification(varId) {
        const res = await uni.$http.post('/main/query/classifiedgoods', varId)
        if (res.data.code !== 200) return uni.$showMsg('获取商品信息失败，请重试')
        this.fromHomeData = res.data.data
      },
      // 重置按钮
      resetStyleList() {
        this.commonList = []
      },
      //子给父传递过来需要删除的item
      deleteStyItem(styitem) {
        this.commonList.forEach((item, index) => {
          if (item.name == styitem.name) {
            this.commonList.splice(index, 1)
          }
        })
      },
      // input输入事件
      input(e) {
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.keyWord = e
        }, 500)
      },
      showhide(id) {
        //内容区
        if (id === this.maskNum) {
          this.maskNum = 9
        } else {
          this.maskNum = id
        }
        //上下箭头区
        if (this.uniIcon === id) {
          this.uniIcon = -1
        } else {
          this.uniIcon = id
        }
        this.commonList = []
      },
      // 获取筛选栏分类数据
      async getAllSortList() {
        const {
          data: res
        } = await uni.$http.get('/main/query/condition')
        // 如果请求失败
        if (res.code !== 200) return uni.$showMsg()
        this.styleList = res.data.style
        this.styleList.forEach((item, index) => {
          this.styleList[index].name = item.styleName
        })
        this.materialList = res.data.material
        this.materialList.forEach((item, index) => {
          this.materialList[index].name = item.materialName
        })
        this.dimensionsList = res.data.dimensions
        this.dimensionsList.forEach((item, index) => {
          this.dimensionsList[index].name = item.dimensionsName
        })

      },
      //价格升序
      price_top() {
        console.log('+++');
      },
      price_down() {
        console.log('---');
      },
      //筛选风格item点击事件
      addItem(item) {
        this.commonList.push(item)
        console.log(this.commonList);
      },
      // 搜索框结果接口
      async getSearchResult(cb) {
        // 打开节流阀
        // this.isLoading = true
        const res = await uni.$http.get(
          `/main/searchbox?pageNum=${this.queryObj.pageNum}&pageSize=10&goodsName=${this.queryObj.goodsName}&styleIds=${this.queryObj.styleIds}&materialIds${this.queryObj.materialIds}`
        )
        // this.isLoading = false
        cb && cb()
        if (res.data.code !== 200) return uni.$showMsg('请求失败')
        if (res.data.rows.length == 0) return uni.$showMsg('无此商品')
        this.fromHomeData = [...this.fromHomeData, ...res.data.rows]

      },
      // 从二级分类进入
      async secondaryClassification(varietysId) {
        const res = await uni.$http.get(`/main/classify/list/${varietysId}`)
        if (res.data.code !== 200) return uni.$showMsg('暂无此商品')
        if (res.data.rows.length == 0) return uni.$showMsg('无此商品')
        this.fromHomeData = res.data.rows
      }
    },
    onReachBottom() {
      // if (this.isLoading) return
      // 让页码自增+1
      this.queryObj.pageNum++
      this.getSearchResult(() => uni.stopPullDownRefresh())
    },
    onPullDownRefresh() {
      // 重置数据
      this.queryObj.pageNum = 1
      this.fromHomeData = []
      this.getSearchResult()
    },
    onLoad(options) {
      console.log(options);
      this.getAllSortList() // 获取筛选栏的数据
      // 判断是用户搜索进来还是点击一级分类进来
      if (options.hasOwnProperty('goodsName')) {
        this.queryObj.goodsName = options.goodsName
        console.log('从搜索进入');
        this.getSearchResult()
      } else if (options.hasOwnProperty('varietyId')) {
        console.log('从分类进入');
        this.getClassification(options) // 从分类进入
      } else {
        console.log('从二级分类进入');
        this.secondaryClassification(options.varietysId + '')
      }
    }
  }
</script>

<style lang="scss">
  .main-container {
    position: relative;
  }

  .screening {
    font-size: 14px;
    color: #9BA3AA;
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 20rpx;


  }

  .mask {

    .mask-content {
      width: 100%;
      // position: absolute;
      // top: 350rpx;
      text-align: center;
      display: flex;
      flex-wrap: wrap;
    }

    .mask-button {
      display: flex;
      padding: 0 10px;
      margin: 30rpx 0;

      .checkActive {
        opacity: .4;
        background-color: #EEF1F5;
      }

      .button-left {
        width: 50%;
        height: 70rpx;
        background-color: #fff;
        text-align: center;
        line-height: 70rpx;
        color: black;
        border-top: 1px solid black;
        border-bottom: 1px solid black;
        border-left: 1px solid black;
        border-bottom-left-radius: 20px;
        border-top-left-radius: 20px;
      }

      .button-right {
        width: 50%;
        height: 70rpx;
        background-color: black;
        text-align: center;
        line-height: 70rpx;
        color: #fff;
        border-top: 1px solid black;
        border-bottom: 1px solid black;
        border-left: 1px solid black;
        border-bottom-right-radius: 20px;
        border-top-right-radius: 20px;
      }
    }


    // 遮罩层里面的小块
    .content-small {
      text-align: center;
      width: 20%;
      height: 30px;
      border-radius: 14px;
      line-height: 30px;
      border: 1px solid #B8C1CC;
      font-size: 14px;
      color: #8F9CA9;
      margin-left: 23rpx;
      margin-bottom: 16rpx;
    }

    .checkActive {
      opacity: .4;
      background-color: #EEF1F5;
    }

  }

  .mask-dimension {

    .wrap-item {
      display: flex;
      flex-wrap: wrap;
      // padding-left: 20rpx;

      .size {
        text-align: center;
        width: 320rpx;
        height: 60rpx;
        border-radius: 14px;
        line-height: 30px;
        border: 1px solid #B8C1CC;
        font-size: 14px;
        color: #8F9CA9;
        margin-left: 23rpx;
        margin-bottom: 16rpx;
      }

      .checkActive {
        opacity: .4;
        background-color: #EEF1F5;
      }
    }

    .mask-button {
      display: flex;
      padding: 0 10px;
      margin: 30rpx 0;

      .checkActive {
        opacity: .4;
        background-color: #EEF1F5;
      }

      .button-left {
        width: 50%;
        height: 70rpx;
        background-color: #fff;
        text-align: center;
        line-height: 70rpx;
        color: black;
        border-top: 1px solid black;
        border-bottom: 1px solid black;
        border-left: 1px solid black;
        border-bottom-left-radius: 20px;
        border-top-left-radius: 20px;
      }

      .button-right {
        width: 50%;
        height: 70rpx;
        background-color: black;
        text-align: center;
        line-height: 70rpx;
        color: #fff;
        border-top: 1px solid black;
        border-bottom: 1px solid black;
        border-left: 1px solid black;
        border-bottom-right-radius: 20px;
        border-top-right-radius: 20px;
      }
    }
  }

  .mask-price {
    padding: 0 50rpx;

    .wrap {
      width: 100%;
      font-size: 12px;
      color: black;

      view {
        border-bottom: 1px solid #8F9CA9;
        margin-top: 20rpx;
        height: 20px;
        line-height: 20px;
      }
    }

  }

  // 商品展示
  .goods-lisi {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    box-sizing: border-box;
    // padding: 0 16rpx;

    .goods-lisi-item {
      width: 160px;
      height: 153px;
      // margin-right: 25px;
      // margin-top: 10px;
      // margin-left: 2px;


      image {
        width: 160px;
        height: 100px;
      }

      .goods-name {
        width: 150px;
        white-space: normal;
        font-size: 14px;
        color: #66737F;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .goods-price {
        font-size: 18px;
        color: #141414;
      }
    }
  }

  .goods-lisi::after {
    content: '';
    width: 160px;
    height: 0;
    visibility: hidden;
  }
</style>